<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>博客详情页</title>

    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/detail.css" />
    <!-- 引入 editor.md 的预览CSS -->
    <link rel="stylesheet" href="blog-editormd/css/editormd.preview.css" />
    <link rel="stylesheet" href="blog-editormd/css/editormd.css" />
  </head>

  <body>
    <div class="nav">
      <img src="pic/logo.jpg" alt="" />
      <span class="blog-title">我的博客系统</span>
      <div class="space"></div>
      <a class="nav-span" href="blog_list.html">主页</a>
      <a class="nav-span" href="blog_edit.html">写博客</a>
      <a class="nav-span" href="#" onclick="logout()">注销</a>
    </div>

    <div class="container">
      <div class="left">
        <div class="card profile-card">
          <div class="avatar-wrapper">
            <img class="avatar" src="pic/author.jpg" alt="" />
          </div>
          <h3 class="profile-name"></h3>
          <a class="github-link" href="#">Github地址</a>
          <div class="row stats-row">
            <span>文章</span>
            <span>分类</span>
          </div>
          <div class="row stats-row">
            <span>2</span>
            <span>1</span>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="content">
          <div class="title"></div>
          <div class="date"></div>
          <div class="detail" style="background-color: transparent"></div>
          <div class="operating">
            <!-- <button onclick="window.location.href='blog_update.html'">
              编辑
            </button> -->
            <button onclick="editBlog()">编辑</button>
            <button onclick="deleteBlog()">删除</button>
          </div>
        </div>
      </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <script src="blog-editormd/editormd.min.js"></script>
    <script src="blog-editormd/lib/marked.min.js"></script>
    <script src="js/common.js"></script>
    <script>
      var blogId = null; //添加全局变量用来存储博客ID
      //登录后左侧界面显示对应的用户信息
      $.ajax({
        url: "user/getAuthorInfo" + location.search,
        type: "GET",
        success: function (result) {
          if (result.code === 200 && result.data != null) {
            $(".profile-name").text(result.data.userName);
            if(result.data.githubUrl) {
              $(".github-link")
                .attr("href", result.data.githubUrl)
            } else {
              $(".github-link")
                .attr("href", "#")
            }
          } else {
            alert("获取用户信息失败，请稍后再试。");
          }
        },
      });

      //展示博客详情，使用ajax获取博客详情
      $.ajax({
        url: "/blog/getBlogDetail" + location.search,
        type: "GET",
        success: function (result) {
          console.log(result);
          //返回数据格式是{"data":[{"id":,"title":"","content":"","userId":,"updateTime":""},{}],"code":200,"errMsg":null}
          if (result.code == 200 && result.data != null) {
            //判断是否显示编辑，删除按钮
            if (result.data.userId == localStorage.getItem("loginUserId")) {
              $(".operating").show();
            } else {
              $(".operating").hide();
            }
            var data = result.data;
            //保存博客ID
            blogId = data.id;
            console.log("博客ID:", blogId);
            $(".title").text(data.title);
            $(".date").text(data.updateTime);
            //$(".detail").text(data.content);
            // 使用 marked 渲染 markdown 为 HTML
            var html = marked.parse(data.content);
            $(".detail").html(html);

            /* //使用editormd渲染markdown内容
            editormd.markdownToHTML("detail", {
              markdown: data.content,
              htmlDecode: "style,script,iframe", // 开启 HTML 标签解析，为了安全，默认不开启
              emoji: true, // 是否开启表情解析，默认开启
              taskList: true, // 是否开启任务列表解析，默认开启
            }); */
          } else {
            alert("获取博客详情失败：" + result.errMsg);
            return;
          }
        },
      });
      // 添加编辑博客函数
      function editBlog() {
        if (blogId) {
          window.location.href = "blog_update.html?blogId=" + blogId;
        } else {
          alert("无法获取博客信息，请刷新页面重试");
        }
      }
      //显示博客作者信息
      //var userUrl = "/user/getAuthorInfo" + location.search;
      //getUserInfo(userUrl);

      function deleteBlog() {
        //确定删除框
        if (!confirm("确定要删除这篇博客吗？")) {
          return;
        }
        $.ajax({
          url: "/blog/delete" + location.search,
          type: "POST",
          success: function (result) {
            if (result.code === 200 && result.data == true) {
              alert("删除成功,即将跳转到博客列表页");
              location.href = "blog_list.html";
            } else {
              alert("删除失败：" + result.errMsg);
            }
          },
        });
      }
    </script>
  </body>
</html>
